<!DOCTYPE html>
<html>
    <head>
        <title>flex-布局</title>

        <style>
            .grid-box-1 {
                border: 1px solid #999;
                width: 300px;
                height: 200px;
                display:flex;
                margin: 20px;
                flex-direction: row;
                flex-wrap: nowrap;
                /* justify-content: space-evenly; */
                /* align-items: stretch; */
                
            }

            .grid-box-1 > div {
                background-color: bisque;
                border-radius: 4px;
                height: 100px;
                width: 100px;
                border: 1px solid #ccc;
                /* align-content: flex-end; */
                flex-grow: 0;
            }
           
        </style>
    </head>

    <body>
        <div class="grid-box-1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
</html>